<template>
  <div class="nav">
    <ul class="nav-list">
      <li class="nav-title">
        <span>FunCode</span>
      </li>
      <li><span @click="toPage('/home', 1)" :class="[active == 1 ? 'choice' : '']">首页</span></li>
      <li><span @click="toPage('/problem', 2)" :class="[active == 2 ? 'choice' : '']">题库</span></li>
      <li><span @click="toPage('/competition', 3)" :class="[active == 3 ? 'choice' : '']">比赛</span></li>
      <li><span @click="toPage('/competition', 4)" :class="[active == 4 ? 'choice' : '']">动态</span></li>
    </ul>
    <div>
      <el-button type="primary" size="medium">登录</el-button>
      <el-button>注册</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "nav-top",
  data() {
    return {
      active: 1
    }
  },
  methods: {
    toPage(url, idx) {
      this.active = idx
      this.$router.push(url)
    },
    getActive(url){
      if(url.match('/home')) this.active = 1;
      else if(url.match('/problem')) this.active = 2
      else if(url.match('/competition')) this.active = 3

    }
  },
  watch: {
    $route(to, from) {
      this.getActive(to.path)
    }
  }
}
</script>

<style scoped>
.nav {
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-list {
  list-style: none;
  padding: 0;
}

.nav-list li {
  float: left;
  margin: 0 20px;
  cursor: pointer;
}

.nav-title {
  font-family: "HarmonyOS_Sans_Regular";
  font-weight: 600;
}

.choice {
  padding-bottom: 8px;
  border-bottom: solid #409EFF 3px;
}
</style>